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Building the User 
Interface with HTML5 


2.1. Choose and configure HTML5 tags to display text content. 
2.2. Choose and configure HTML5 tags to display graphics. 
2.3. Choose and configure HTML5 tags to play media. 


Agenda 


HTML 

Basic Markup and Page Structure 
Text Elements 

Displaying Graphics 


Canvas & SVG 


co Media in HTML5 


HTML 


<!DOCTYPE html> 


<html lLang="en"> 
<head> 
<meta charset="utf-8" /> 


<title>Basic HTML</title> 
</head> 
<body> 
<hl>This is a Basic 


Header</h1> 
<p>This is a basic 
paragraph.</p> 


Hypertext 
Markup 


Language CAT Ml.) 


structure to web pages 

¢ HTML uses tags, such as <p> and <h1> 
to perform this function 

° Browsers “read” HTML files and then 
produce web pages based on the tags 
that are used 


Versions of HTML 


¢ Throughout the 2000s, HTML 4.01 was the standard for web 
pages 
¢ HTML 4.01 was limited in what it could provide users 
¢ A strong demand for a rich web experience, including audio, 
video, and interactivity led to the development of a new HTML 
standard 


HIT MLS 


The World Wide Web Consortium (W3C) is the standards 
organization responsible for the development of HTML5 


The HTML5 standard encompasses HTML markup tags, 
Cascading Style Sheets (CSS), and JavaScript 


HTML5 is platform-independent 


New with HTML5 


Audio and video Embeds video on web pages using the <audio> and 

tags <video> tags 

Canvas Creates space for JavaScript to draw graphics on a web 
page 

Media queries A feature in CSS3 that detects screen size and adjusts 
output to fit 

New application Provides access to many digital resources that can be 

programming incorporated into the code of web applications 

interfaces 

Geolocation Uses JavaScript to detect the geographic location of a 


device 


Basic Markup 
and Page 
Structure 
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<ipoctype nuns |!!! tag 


<html lane-- €11 > 
<head> 
<meta charset="utf-8" /> 
val tokital HTML</title> 
</head~— OSI NQ ta 
<body> 
<hl>Tn:s 1S a basu: 
header<, n1> 
<p>fhis iS a basic 
paragraph. </p> 
</body> 
</html> 


HTML Tags 


¢ Atag is a keyword surrounded by 
angle brackets 

* Most tags come in pairs, with an 
opening tag and a closing tag 
¢ Closing tags are identical, but include 

a slash before the keyword 

¢ A tag pair or an empty tag is called an 

element 


Common HTML Tags 


TAG PURPOSE 


<html> identifies a page as an HIML document 

<head> contains code used by the browser to add interactivity or 
style a page 

SpReEve> title of a document 

<body> Surrounds content that is visible on a Web page 

<p> paragraphs 

<a links 

href=“URL”> 

<hl> top heading 


<img> images 


Using Attributes 


¢ Tags are used in combination with attributes to describe how 
data should be rendered on a Web page 


¢ In other words, attributes can be used to provide additional information that tags 
cannot provide alone 


¢ Each element has a specific set of attributes that can be used 
with it 
¢ HTML5 includes global attributes, which can be used with any element 
¢ Attributes are added to tags using the following syntax: 


<a 
nret=thttp: //www.bing.com">Bing</a> 
TAG ATTRIBUTE VALU TEXT 


Nesting Elements 


Creating awesome web pages requires you to combine 

elements, their attributes, and engaging content 

When two or more elements apply to the same block of 
content, then you have to nest tag pairs 

Nesting is the process of placing one element inside of 
another 


¢ The outside element is called a parent, while the inner element is called a child 


paren 


child t | 
PO 


<p>I <em>love</em> taking my dog for a 


Lk. 
| love taking my fod or a walk. 


Special Characters in HTML 


¢ A special character, such as a percent sign or a copyright 


symbol, is known as an entity in HTML 


¢ Including entities in a Web page requires character encoding or 


the special characters will not render 


¢ Users will see garbled text instead 
¢ Each special character can be reproduced using its entity 


name OR a numerical code 


¢ Each entity starts with an ampersand (&) and ends with a semicolon (;) 


SPECIAL DESCRIPTION ENTITY NAME CODE 
CHARACTER 


Copyright 
Dollar Sign 
Percent Sign 
Ampersand 


&copy; 
&dollar; 
&percnt; 
&amp; 


&#169 ; 
&#36; 
&#37; 
&#38 ; 


The DOCTYPE 


¢ A doctype declaration is used to help a Web browser 
determine which rules it should use for rendering a Web page 


¢ In HTML 4, doctype declarations require a reference to a 
Document Type Definition (DTD) and looks quite complex 


¢ In HTML5, the doctype declaration is simpler, as shown below 


HTML 4 


HTMLS 


<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.1//EN" 


“"http://www.example.com/TR/xhtml11/DTD/ 
xhtml1il.dtd"> 


<!DOCTYPE html> 


HTML5 Elements tn Action 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>HTML5 Elements in Action</title> 
</head> 
<body> 
<hl>This is a header</hl> 
<p>This iS a paragraph. </p> 
</body> 
</html> 


Text Elements 


Bae 


HTML Text Elements 


<b> Defines bold text 

<em> Defines emphasized text 
<i Defines italicized text 
<small> Defines smaller text 
<strong> Defines important text 
<sub> Defines subscript text 


<SUp> Defines superscript text 


Text Element Demo 


<!DOCTYPE html> 

<html Lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title>HTML Example</title> 

</head> 

<body> 
<hl>This is a sample page.</hl1> 
<p>This page includes <em>some</em> <strong>nested 
elements</strong>.</p> 

</body> 

</html> 


Text Elements with New Functionality 


ELEMEN |FUNCTIONALITY INHTML |FUNCTIONALITY IN HTML5 
T 4 


<b> emphasize text by making it “stylistically offsets” text 
bold 
<i> emphasize text by making it “alternate voice or mood” 
italic 
<strong> N/A labels text as strong 
importance, while making it 
appear bold 
<em> N/A indicates emphatic stress, 


while making it appear italic 


Text Elements No Longer Used 


¢ With the addition of new cipghitepraprdetlhate (Bd chigi Latah t ahi 
ELEMENT 
elements, W3C earmarks 


elements or attributes for ial a Sopoe 
removal <applet> <object> 
¢ Elements and attributes are removed <basefont> Use CSS instead 

because they are no longer useful <big> Use CSS instead 

* The process of removing <center> Use CSS instead 
elements Is called Te he 
deprecation <font> Use CSS instead 

* Deprecated elements may TES <del> or CSS 
still render in older browsers, instead 


but best practice suggests 
you should not use them if 
developing for newer 


ee es Oe 


Displaying 
Graphics 
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Images and Raster 
Graphics in HTML 


¢ Images are an incredibly important 
aspect of creating engaging Web pages Vector 
¢ There are two major categories of Image 


images that can be used: 
° raster (bitmap) 
* vector 


¢ Raster images are made up of pixels, 
while vector images are made of lines 
and curves 


yr 


Raster vs. Vector Images 


Raster Images Vector Images 

¢ Photographs are raster ¢ Digital illustrations are 
images typically vector images 

¢ Raster file formats include ¢ Vector images maintain 
JPG, PNG, GIF, and BMP quality when enlarged 

¢ Raster images pixelate ¢ Vector images are typically 
when they are enlarged made with advanced 


programs like Photoshop or 
CorelDRAW, then converted 
into PNG or GIF formats 
(raster file types) 


img Element 


¢ Add images to a Web page using the <img> tag 
¢ NOTE: A closing tag is not required for the image element 
¢ The <img> tag requires use of the src and alt attributes 
¢ src stands for source 
¢ alt stands for alternative 
¢ src defines the pathway for the image file, while the value of 
the alt attribute makes text accessible to people with 
disabilities 


Attributes of the img element 


ATTRIBUT | VALUE DESCRIPTION 
E 


Sine URL Specifies the location of an image 


alt Text Specifies alternate text for an image, which 
displays when a user hovers their mouse 
pointer over it 


height pixels Specifies the height of an image 

width pixels Specifies the width of an image 

ismap ismap Specifies an image as a server-side image 
map 


usemap #mapname Specifies an image as a client-side image map 


figure and figcaption Elements 


The img element can be used in combination with two new 


elements, figure and figcaption, to organize images and 
provide captions 


The figure element specifies the type of figure that is being 
added, and can also be used to group images side by side 


The figcaption element can be used to add captions before 
or after images 


<figure> 


<figcaption=Wwho wouldn't want to take this dog for a walk?</figcaption> 


<img src="dog.jpg" alt="This is a picture of my dog, Stella." 
title="Stella"/> 


</figure> 


Canvas & SVG 
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The canvas Element 


¢ The canvas element creates a blank container for graphics 
¢ It’s anew element in HTML5 and you can draw graphics using 
JavaScript 
¢ Drawing on a canvas Is done by using the Canvas API 


¢ Canvas can is used by developers to create 2D games or 
animations 


<canvas id="myCanvas" width="500px" 
height=“300px"></canvas> 
this code makes a blank 
container 


The canvas Element tn Action 


<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Canvas Test</title> 
<script> 
function f1() { 


var canvas = document.getElementById("smlRectangle") ; 
context = canvas.getContext("2d"); 
context. fillStyle = "rgb(0,0,255)"; 
context. fillRect(10, 20, 200, 100); 
} 
</script> 
</head> 
<body onload = "f1();"> 
<canvas id="smlRectangle" height="100" width="200 "></canvas> 
</body> 
</html> 


Alternative Images or Text for Older Browsers 


The canvas element won’t work on some older browsers 


To avoid problems with rendering, you should add content that 
will display when a canvas drawing cannot 


¢ The content can be an image or text 


<canvas id="smlRectangle2" height="100" width="200"> 


src="http://www.example.com/images/smlRectangle. jpg" 
alt="A blue rectangle" /> 
</canvas> 


Scalable Vector Graphics 


¢ Scalable Vector Graphics (SVG) is a language for describing 2D 
graphics in XML 

¢ With SVG, you provide drawing instructions within your code 
versus using the src attribute to point to a file 

¢ Unlike other image types, graphics created using the svg 


element are scalable 
¢ The quality of the image will not change if it shrinks or is enlarged 


<svg height="1000px" width="1000px"> 

<rect id="myRect" height="100px" width="100px" 
fill="blue"/> 
</Svg> 


Canvas vs. SVG 


Canvas 


Use for small drawings 
Use for drawings with a lot 
of objects in them 

Use for small screens 

Use for real-time data 
output, such aS maps or 
weather data 


Scalable Vector Graphics 
¢ Use for larger graphics 


¢ Use for drawings with a 
Small number of objects 

¢ Use for drawings that 
require a large number of 
pixels 

¢ Use for highly detailed 
vector graphics 


Media in HITML5 
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Media in HTML5 


Multimedia is a key component of a 
high-quality Web browsing experience 
Before HTML5, browsers depended on 
plug-ins and media players to allow 
users to listen to music and watch 
videos 

Now, browsers that support HTML5 can 
provide access to multimedia with the 
<video> and <audio> tags 


Video Tags 


¢ You can embed video into HTML documents using the <video> 
element 


¢ Use the source attribute to point to the location of the video 
file 

¢ The height and width attributes help determine how the 
video will appear on a Web page 


<video src="cat_ vid.mp4" height="300" width="400"></video> 


Video Control Attributes 


HTML | 
There are a number of other 
attributes that can be used with <video 
the video tag to add control of src=“cat vid.mp4 
the video ek 
width="400 

displays a static image before heig ht="300" 

the video loads ‘a ; ‘a 
autopLay starts playing the video DO sce r= meow. J Pg 

automatically upon page load iS ut opLlay 
controls displays controls for controlling 

the volume, playing, pausing, and cont rol S 

stopping the video 1 
Loop plays the video on repeat OO p> 

</video> 


Video Formats 


A number of video formats are 
supported by Web browsers, 
including MP3, H.264, OGG, and 
WebM 


When you specify the video type, 


you should also specify the 
codec 


¢ A codec is the technology used for 


compressing data 

It’s a best practice to use the 
<source> tag in combination 
with its type attribute to point to 
the file and specify the file type 


| HTML |. 
<video 

width="400" 

height="300" 


poster="“meow. jpg" 
autopLlay="autopLlay" 
controls="controls" 
Loop=" lLoop"> 
<source 
src="cat_ vid.mp4” 
type="video/mp4" /> 
</video> 


Browser Compatibility 


Not all video formats are 
compatible with all browsers 


The MP4 format is the most 
commonly used by Web 
browsers and mobile devices 


To ensure that a video is 
compatible with a majority of 
browsers and devices, you 
should use the <source> 
element to include multiple 
formats 


7 HTML 
<video 

width="400" 

height="300" 


poster=“meow.]pg" 
autoplay="autoplay" 
controls="controls" 

Loop="loop"> 


<source src="cat_vid.mp4" 
type="video/mp4" /> 


<source src=“cat_ vid.ogg” 
type=‘video/ogg; 

codecs="theora, vorbis” ’> 
</video> 


Audio Tags 


The HTML5 audio element works much like the video element 
Include the <audio> tag and a path that points to the audio 
file. 


You can modify the audio element using its control-related 
attributes, including: 


* autoplay 
* controls 
¢ Loop 


<audio src="myaudio.mp3" controls="controls”></audio> 


Audio Formats 


¢ There are three primary formats of audio supported by Web 
browsers, including: 
- OGG 
- MP3 
- WAV 


¢ Not every browser supports every audio type 
¢ The MP3 file format is the most commonly supported type 
¢ You can use the source attribute to include multiple types 


<audio controls> 
<source src=“myaudio.mp3” type=“audio/mp3”" /> 


<source src="“myaud1i0.0gg” type="“audi0/ogg” /> 
</audio> 
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